<template>
  <scroll :data="data" class="listview" ref="listview">
    <uL>
      <li v-for="item in data" class="list-group-item" :key="item.id" @click='selectItem(item)'>
        <img class="avatar" :src="item.img1v1Url">
        <span class="name">{{item.name}}
          <i v-if='item.alias.length > 0' class="alias">({{item.alias.join()}})</i>
        </span>
      </li>
    </ul>
    <div v-show="!data.length" class="loading-container">
      <loading></loading>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
export default {
  props: {
    data: {
      type: Array
    }
  },
  computed: {
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    selectItem(item) {
      this.$emit('select', item)
    },
    refresh() {
      this.$refs.listview.refresh()
    }
  },
  watch: {
  },
  components: {
    Scroll,
    Loading
  }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .listview
    position: relative
    width: 100%
    height: 100%
    overflow: hidden
    background: $color-background
    .list-group-item
      display: flex
      align-items: center
      padding: 5px 15px 5px 8px
      border-bottom: 1px solid #eee
      .avatar
        width: 50px
        height: 50px
        border-radius: 3px;
      .name
        margin-left: 10px
        color: $color-text
        font-size: $font-size-medium-x
        .alias
          font-size:$font-size-medium
          color: #999
          font-style: normal
    .loading-container
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
